.dropdown-original {
	display: none;
}

.sprocket-dropdown {
	display: inline-block;
	margin-bottom: 9px;
	margin-right: 5px;
	position: relative;

	a {
		text-decoration: none;
	}
}

.dropdown-toggle {
	// The caret makes the toggle a bit too tall in IE7
	*margin-bottom: -3px;
}

.sprocket-dropdown .btn:last-child,
.sprocket-dropdown .dropdown-toggle {
	-webkit-border-top-right-radius: 4px;
	-moz-border-radius-topright: 4px;
	border-top-right-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	border-bottom-right-radius: 4px;
}

// Reposition the caret
.btn .caret {
	margin-top: 7px;
	margin-left: 0;
}
.btn:hover .caret,
.open.btn-group .caret {
	.opacity(100);
}

.dropdown-toggle:active,
.open .dropdown-toggle {
	outline: 0;
}
// Dropdown arrow/caret
.caret {
	display: inline-block;
	width: 0;
	height: 0;
	text-indent: -99999px;
	// IE7 won't do the border trick if there's a text indent, but it doesn't
	// do the content that text-indent is hiding, either, so we're ok.
	*text-indent: 0;
	vertical-align: top;
	border-left:  4px solid transparent;
	border-right: 4px solid transparent;
	border-top:   4px solid @black;
	.opacity(30);
	content: "\2193";
}

.sprocket-dropdown:hover .caret,
.open.sprocket-dropdown .caret {
	.opacity(100);
}
// The dropdown menu (ul)
.dropdown-menu {
	position: absolute;
	top: 100%;
	left: -1px;
	z-index: @zindexDropdown;
	float: left;
	display: none; // none by default, but block on "open" of the menu
	min-width: 160px;
	/*max-width: 220px;*/
	_width: 160px;
	padding: 4px 0 !important;
	margin: 1px 0 0 !important; // override default ul
	list-style: none;
	background-color: @white;
	border-color: #ccc;
	border-color: rgba(0,0,0,.2);
	border-style: solid;
	border-width: 1px;
	.border-radius(5px);
	.box-shadow(0 5px 10px rgba(0,0,0,.2));
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding;
	background-clip: padding-box;
	*border-right-width: 2px;
	*border-bottom-width: 2px;

	// Allow for dropdowns to go bottom up (aka, dropup-menu)
	&.bottom-up {
		top: auto;
		bottom: 100%;
		margin-bottom: 2px;
	}

	// Dividers (basically an hr) within the dropdown
	.divider {
		height: 1px;
		margin: 5px 0;
		overflow: hidden;
		background-color: #e5e5e5;
		border-bottom: 1px solid @white;

		// IE7 needs a set width since we gave a height. Restricting just
		// to IE7 to keep the 1px left/right space in other browsers.
		// It is unclear where IE is getting the extra space that we need
		// to negative-margin away, but so it goes.
		*width: 100%;
		*margin: -5px 0 5px;
	}

	// Links within the dropdown menu
	a {
		display: block;
		padding: 3px 15px;
		clear: both;
		font-weight: normal;
		line-height: 18px;
		color: @gray !important;
		white-space: nowrap;
		font-size: @baseFontSize - 1;
	}

	li {
		width: 100% !important;
		float: none !important;
	}
}

// Hover state
.dropdown-menu li > a:hover,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
	color: @white !important;
	text-decoration: none;
	background-color: @linkColor;
}

// Open state for the dropdown
.sprocket-dropdown.open {
	// IE7's z-index only goes to the nearest positioned ancestor, which would
	// make the menu appear below buttons that appeared later on the page
	*z-index: @zindexDropdown;

	.dropdown-toggle {
		background-image: none;
		@shadow: inset 0 2px 4px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.05);
		.box-shadow(@shadow);
		background-color: darken(@white, 5%);
		background-color: darken(@white, 15%) e("\9");
		color: rgba(0,0,0,.5);
		outline: 0;
	}
	.dropdown-menu {
		display: block;
	}
}
